<template>
  <div class="mapBox">
   <ul class="btns">
    <li :class="{active: current === 0}" @click="current=0">pure leaflet</li>
    <li :class="{active: current === 1}" @click="current=1">vue2leaflet</li>
    <li :class="{active: current === 2}" @click="current=2">PreLeaflet</li>
    <li :class="{active: current === 3}" @click="current=3">Draw</li>
    <li :class="{active: current === 7}" @click="current=7">click</li>
    <li :class="{active: current === 4}" @click="current=4">google影像</li>
    <li :class="{active: current === 8}" @click="current=8">TestDraw</li>
   </ul>

   <PureLeaflet v-if="current === 0" />
   <Vue2Leaflet v-if="current === 1" />
   <PreLeaflet v-if="current === 2" />
   <Draw v-if="current === 3" />
   <ClickLeaflet v-if="current === 7"/>
   <GoogleTiandi v-if="current === 4" />
   <TestDraw v-if="current === 8" />
  </div>
</template>

<script>

import Draw from './pages/Draw.vue';
import GoogleTiandi from './pages/GoogleTiandi.vue';
import PreLeaflet from './pages/PreLeaflet.vue';
import TestDraw from './pages/TestDraw.vue';
import PureLeaflet from './pages/PureLeaflet.vue';
import Vue2Leaflet from './pages/Vue2Leaflet.vue';
import ClickLeaflet from './pages/Click.vue';
export default {
    name: 'LeafletMap',
    data() {
      return {
       current: 8
      }
    },
    mounted() {
    },
    methods: {
     
    },
    components: {
      PureLeaflet,
      Vue2Leaflet,
      PreLeaflet,
      Draw,
      ClickLeaflet,
      GoogleTiandi,
      TestDraw
    }
    
  }
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.btns {
  display: flex;
}
body .leaflet-popup-content-wrapper {
  background: #0a2832!important;
    border-radius: 5px!important;
    color: #fff!important;
}

body .leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: #0a2832!important;
}
body .leaflet-container .leaflet-popup-close-button {
  color: red !important;
}
.btns li {
  border: 1px solid green;
  padding: 20px;
  margin: 20px;
  list-style: none;
  border-radius: 20px;
  user-select: none;
  cursor: pointer;
}

.btns .active {
  background: green;
  border-color: #fff;
  color: #fff;
}
</style>
